<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" c id="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input name="username" type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input name="password" type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import $ from 'jquery'
export  default {
  name:"Login",
  data(){
    return {
      form:{
        username: '',
        password: ''
      },
      //表单验证，需要再el-form-item 元素中增加prop属性
      rules:{
        username: [
            {required:true,message:'账号不能为空',trigger:'blur'}
          ],
    password:[
    {required: true,message: '密码不能为空',trigger:'blur'}
          ]
  },
    //对话框显示和隐藏
    dialogVisible:false
  }
  },
  methods:{
    onSubmit(formName) {
      //为表单绑定验证功能
      this.$refs[formName].validate((valid) =>{
        if (valid){
          //使用 vue-router路由到指定页面，该方式称之为编程式导航
        //   this.$router.push("/main/"+this.form.username);
					var formData = {
							username: this.form.username,
							password: this.form.password,
						};
				// this.axios.post(`http://120.77.213.195:8001/furyLogin?username=${this.form.username}&password=${this.form.password}`).then((response) => {
				// 	console.log(response);
				// 	console.log()
				// });

				// this.$http.jsonp('http://120.77.213.195:8001/furyLogin', {
				// 	params: {username:this.form.username,password:this.form.password},
				// 	jsonp: 'onBack'
				// }).then((res) => {
				// 	console.log(res); 
				// })
				alert($('#login-box').serialize());
				this.axios.post(`http://120.77.213.195:8001/login`,this.form).then(rs => {
					console.log(rs);
					if (rs.data.code == 0) {
						//登录成功
						let userAuth = rs.data.data;
						//存用户权限信息
						this.setAuth(userAuth);
						//决定是否跳转
						this.gotoManagerCenter(userAuth.token);
					} else {
						alert(rs.data.msg);
					}
				}).catch(err => {
					alert(err);
				});
			// 	$.ajax({  
			// 		type: "POST",  
			// 		contentType:"application/json;charset=utf-8",
			// 		// contentType: false,//这里
            //         // processData: false,//这两个一定设置为false
			// 		url:`http://120.77.213.195:8001/userlogin?username=${this.form.username}&password=${this.form.password}`,  
			// 		// data:JSON.stringify($('#form').serialize()),  
			// 		data:{'username':this.form.username,'password':this.form.password}, 
			// 		dataType: "json",
			// 		// async: false,  
			// 		error: function(request) {  
			// 			alert("Connection error");  
			// 			alert(request);
			// 		},  
			// 		success: function(data) {  
			// 			//接收后台返回的结果  
			// 			console.log(data);
			// 			console.log("=======");
			// 			if(data.code==500){
			// 				console.log("daima")
			// 			}
			// 			// window.location.href = "http://localhost:8080/#/main/blog";
			// 		} 
			// 	});
			// this.$router.push("/main/blog");
        } else {
          this.dialogVisible = true;
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
#login-box{
  border: 1px solid #DCDFE6;
  width: 350px;
  margin:100px auto;
  padding:35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow:0 0 25px #909399;
}

.login-title{
  text-align:center;
  margin:0 auto 40px auto;
  color:#303133;
}
</style>
